<template>
    <div>
        <header class="header">
            <el-row>
                <el-col :xs="4" :sm="0" :md="0" :lg="0" :xl="0">
                    <i class="el-icon-more"></i>
                </el-col>
                <el-col :xs="20" :sm="6" :md="6" :lg="6" :xl="6"><span>NWUER BBS</span></el-col>
                <el-col :xs="0" :sm="12" :md="12" :lg="12" :xl="12">
                    <nav>
                        <router-link class="link" to='/index'>首页</router-link>
                        <router-link class="link" to='/discover'>发现</router-link>
                        <router-link class="link" to='/about'>关于</router-link>
                    </nav>
                </el-col>
                <el-col :xs="0" :sm="6" :md="6" :lg="6" :xl="6">
                    <div class="avater-container">
                        <el-dropdown class="drop-down" @command="handleCommand">
                            <el-avatar class="el-dropdown-link" shape="circle" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>我的主页</el-dropdown-item>
                                <el-dropdown-item command="login">登录</el-dropdown-item>
                                <el-dropdown-item disabled>注销</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                        </div>
                </el-col>
            </el-row>
        </header>
    </div>
</template>

<script>
export default {
    name:"MyHeader",
}
</script>

<style lang="scss" scoped>
.header{
    width:100%;
    height: 80px;
    background-color: #fff;
    line-height: 80px;
}
.avater-container{
    .drop-down{
        height: 80px;
        line-height: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

</style>